<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .icon1{
            /* 把行内元素改变成块级元素 */
            display: block;
            width: 45px;
            height:45px;
            background-image: url(1.png);
            border: 1px solid red;
            background-position: 0 40px;
        }
        .icon2{
            /* 把行内元素改变成块级元素 */
            display: block;
            width: 45px;
            height:45px;
            background-image: url(1.png);
            border: 1px solid red;
            background-position: -111px -55px;
        }
    </style>
</head>
<body>
    <!-- CSS Sprite也叫CSS精灵图、CSS雪碧图,只一种网页图片应用处理的一种方式，它允许你将一个
        页面涉及到的所有零星图片到包含到一张大图中去 
    优点：减少图片的字节
          减少网页中的http请求，从而大大的提高了网页的性能
    原理：
         通过background-image引入背景图片
         通过background-position把图片移动到自己需要的位置
    -->

    <span class="icon1"></span>
    <span class="icon2"></span>
</body>
</html>